<!-- 会员卡续费 -->
<template>
  <div>
    <el-alert title="提示：请先输入会员卡号查询会员信息"
              type="warning"
              :closable="false">
    </el-alert>
    <el-card shadow="never">
      <!-- <el-row style="margin: 0 0 20px; ">
        <el-col :span="18">
          <el-input style="width: 400px; padding-left:20px;"
                    v-model="dataForm.cardNumber"
                    placeholder="会员卡号"
                    @keyup.enter.native="queryCardEnterHandle"
                    clearable>
            <div slot="prepend">会员卡号</div>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="queryCardEnterHandle"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          &nbsp;
        </el-col>
      </el-row> -->
      <el-form label-width="100px"
               :model="dataForm"
               :rules="dataRule"
               size="small"
               ref="dataForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="会员卡号"
                          prop="cardNumber">
              <el-input v-model="dataForm.cardNumber"
                        placeholder="会员卡号"
                        @keyup.enter.native="queryCardEnterHandle"
                        v-fo
                        clearable>
                <template slot="append">
                  <el-button icon="el-icon-search"
                             @click="queryCardEnterHandle"></el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="会员姓名">
              <el-input v-model="dataForm.name"
                        placeholder="会员姓名"
                        disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码">
              <el-input v-model="dataForm.telphone"
                        placeholder="手机号码"
                        disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剩余次数">
              <el-input v-model="dataForm.lastusage"
                        placeholder="剩余次数"
                        disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-tooltip class="item"
                        effect="dark"
                        content="该功能暂时不可用"
                        placement="top">
              <el-form-item label="充值金额"
                            prop="money">
                <el-input v-model="dataForm.money"
                          placeholder="充值金额"
                          disabled
                          clearable></el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可用次数"
                          prop="usage">
              <el-input v-model="dataForm.usage"
                        :min="0"
                        :max="100"
                        placeholder="可用次数"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="有效日期"
                          prop="expiryDate">
              <el-date-picker v-model="dataForm.expiryDate"
                              type="datetime"
                              placeholder="选择日期时间"
                              clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="备注"
                          prop="remark">
              <el-input v-model="dataForm.remark"
                        placeholder="备注"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item class="el-form-item-btn">
              <el-button type="primary"
                         @click="confirmDataFormSubmit"
                         :disabled="xfBtnDisabled"
                         v-if="isAuth('member:card-renew:save')">立即续费</el-button>
              <el-button type="info"
                         @click="resetBtnHandle">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table :data="dataList"
                v-loading="dataListLoading"
                border
                stripe
                size="small"
                style="width: 100%">
        <el-table-column fixed
                         prop="createdTime"
                         label="充值日期"
                         header-align="center"
                         align="center"
                         width="170">
          <template slot-scope="scope">
            {{scope.row.createdTime  | formatDate('yyyy-MM-dd hh:mm:ss')}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="money"
                         header-align="center"
                         align="center"
                         label="金额"
                         width="100">
        </el-table-column> -->
        <el-table-column prop="usage"
                         header-align="center"
                         align="center"
                         label="可用次数">
        </el-table-column>
        <el-table-column prop="lastusage"
                         header-align="center"
                         align="center"
                         label="剩余可用次数">
        </el-table-column>
        <el-table-column prop="totalusage"
                         header-align="center"
                         align="center"
                         label="总可用次数">
        </el-table-column>
        <el-table-column prop="createdBy"
                         header-align="center"
                         align="center"
                         label="操作人">
        </el-table-column>
        <el-table-column prop="remark"
                         header-align="center"
                         align="center"
                         label="备注">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle"
                     @current-change="currentChangeHandle"
                     :current-page="pageIndex"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize"
                     :total="totalPage"
                     background
                     layout="total, prev, pager, next">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// https://github.com/happyiu/id-validator-modify#readme
import { formatDate } from '@/utils/date'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      xfBtnDisabled: true,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataForm: {
        cardNumber: '',   // 会员卡号
        name: '',         // 会员姓名
        telphone: '',     // 联系电话
        idcard: '',       // 身份证号
        cardTypeName: '', // 会员卡类型
        method: '',       // 办卡方式
        lastusage: '',    // 剩余可用次数
        usage: '',        // 可用次数
        cardId: '',       // 会员卡编号
        money: '0',        // 充值金额
        expiryDate: '',   // 有效截止日期
        remark: ''       // 备注
      },
      dataRule: {
        cardNumber: [
          { required: true, message: '会员卡号不能为空', trigger: 'blur' }
        ],
        cardId: [
          { required: true, message: '会员卡编号不能为空', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '金额不能为空', trigger: 'blur' }
        ],
        usage: [
          { required: true, message: '可用次数不能为空', trigger: 'blur' }
        ],
        expiryDate: [
          { required: true, message: '有效截止日期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  filters: {
    formatDate (time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  // 方法集合
  methods: {
    init () {

    },
    // 按回车查询会员信息
    queryCardEnterHandle () {
      // 判断会员卡是否为空
      if (!this.dataForm.cardNumber) {
        this.$alert('请输入会员卡号', '系统提示', {
          confirmButtonText: '确定',
          type: 'warning',
          showClose: false
        })
        return !1
      }
      // 查询会员信息
      this.$http({
        url: this.$http.adornUrl(`/member/card/cardnumber/${this.dataForm.cardNumber}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (!data.data) {
            this.$alert('会员卡不存在，请确认后再查询', '系统提示', {
              confirmButtonText: '确定',
              type: 'warning',
              showClose: false
            })
            return !1
          }
          this.dataForm.name = data.data.name
          this.dataForm.telphone = data.data.telphone
          this.dataForm.lastusage = data.data.usage
          this.dataForm.cardId = data.data.id

          // 还原默认值
          this.dataForm.money = '0'
          this.dataForm.usage = ''
          this.dataForm.expiryDate = ''
          this.dataForm.remark = ''
          this.xfBtnDisabled = false

          // 加载充值记录
          this.pageIndex = 1
          this.totalPage = 0
          this.getDataList()
        }
      })
    },
    // 提示是否确认提交
    confirmDataFormSubmit () {
      this.$confirm('请确认会员卡续费，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataFormSubmit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 提交充值续费
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/member/cardrenew/v2/save`),
            method: 'post',
            data: this.$http.adornData({
              'cardId': this.dataForm.cardId,
              'money': this.dataForm.money,
              'usage': this.dataForm.usage,
              'expiryDate': this.dataForm.expiryDate.getTime() / 1000,
              'remark': this.dataForm.remark,
              'createdBy': this.$store.state.user.name
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '会员卡续期成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.initialVal()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/member/cardrenew/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'cardId': this.dataForm.cardId
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 还原为默认值
    initialVal () {
      for (var item in this.dataForm) {
        this.dataForm[item] = ''
      }
      this.dataList = null
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.dataListLoading = false
      this.xfBtnDisabled = true
    },
    // 重置按钮
    resetBtnHandle () {
      this.$refs['dataForm'].resetFields()
      this.initialVal()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.el-input-group >>> .el-input-group__prepend {
  background-color: #fed751 !important;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
.h3 {
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 22px;
}
.el-form2 {
  width: 100%;
  /* margin: 0px auto; */
  margin-top: 20px;
  padding: 20px 20px 0 20px;
  border: 1px solid #c6e2ff;
  border-radius: 0.3rem;
}
.el-form-item-btn {
  margin-bottom: 0;
}
.el-card {
  margin: 10px;
}
</style>